<template>
  <view
    class="progress"
    :style="{
      width: width + 'rpx',
    }"
  >
    <view
      class="progress-bg"
      :style="{
        width: width + 'rpx',
      }"
    >
      <image
        :src="staticUrl('/static/images/widget/progress/bg.png')"
        :style="{
          width: width + 'rpx',
        }"
      />
    </view>

    <view
      class="progress-front"
      :style="{ width: percent + '%' }"
    >
      <image
        v-if="type == 'primary'"
        :src="staticUrl('/static/images/widget/progress/front_primary.png')"
        :style="{
          width: width + 'rpx',
        }"
      />
      <image
        v-else
        :src="staticUrl('/static/images/widget/progress/front.png')"
        :style="{
          width: width + 'rpx',
        }"
      />
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      percent: {
        type: [Number, String, Function],
        default: 0,
      },
      type: {
        type: String,
        default: "", //primary
      },
      width: {
        type: [Number, String],
        default: 502,
      },
    },
  };
</script>

<style lang="scss" scoped>
  .progress {
    position: relative;
    width: 502rpx;
    height: 12rpx;
    line-height: 12rpx;
    image {
      width: 502rpx;
      height: 12rpx;
    }

    &-bg {
      position: relative;
      z-index: 1;
      width: 502rpx;
      height: 12rpx;
      line-height: 12rpx;
    }

    &-front {
      position: absolute;
      z-index: 2;
      top: 0;
      overflow: hidden;
      line-height: 12rpx;
    }
  }
</style>
